<template>
    <app-layout>
      <view id="apps">
        <!-- header -->
        <view class="header">
          <view class="lct" @click="getLocation">
            <image src="/static/images/icon_lct@2x.png" mode="widthFix"></image>
            <text>{{cur_city}}</text>
          </view>
          <view class="so">
            <image src="/static/images/icon_so@2x.png" mode="widthFix"></image>
            <input type="text" placeholder="请输入关键词" placeholder-class="placeholder">
          </view>
          <view class="sao">
            <image src="/static/images/icon_sao@2x.png" mode="widthFix" @click="scanCode"></image>
            <image class="kefu" src="/static/images/icon_chat@2x.png" mode="widthFix" @click="kefu"></image>
          </view>
        </view>
        <!-- swiper 幻灯-->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
          <swiper-item>
            <view class="swiper-item">
              <image src="/static/images/bns.png" mode="widthFix"></image>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <image src="/static/images/bns.png" mode="widthFix"></image>
            </view>
          </swiper-item>
        </swiper>
        <!-- icon_list  图标-->
        <view class="icon_list">
          <view class="item">
            <image src="/static/images/icon_cyms@2x.png" mode="widthFix"></image>
            <text>餐饮美食</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_mrmf@2x.png" mode="widthFix"></image>
            <text>美容美发</text>
          </view>
          <view class="item">
            <image src="/static/images/iocn_cspl@2x.png" mode="widthFix"></image>
            <text>超市便利</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_xxyl@2x.png" mode="widthFix"></image>
            <text>休闲娱乐</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_jdzs@2x.png" mode="widthFix"></image>
            <text>酒店住宿</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_ydjs@2x.png" mode="widthFix"></image>
            <text>运动健身</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_yyjk@2x.png" mode="widthFix"></image>
            <text>医药健康</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_jypx@2x.png" mode="widthFix"></image>
            <text>教育培训</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_qcfw@2x.png" mode="widthFix"></image>
            <text>汽车服务</text>
          </view>
          <view class="item">
            <image src="/static/images/icon_jzwy@2x.png" mode="widthFix"></image>
            <text>家装物业</text>
          </view>
        </view>

        <!-- 品牌推荐 -->
        <view class="logo_hot">
          <view class="title">
            <text class="t">品牌推荐</text>
            <view class="more">
              <text>更多</text>
              <image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
            </view>
          </view>
        </view>

        <!-- scroll-view -->
        <scroll-view  class="scrollview" scroll-x="true" scroll-left="144" show-scrollbar="false">
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
            <view class="item">
              <image src="/static/images/face.png"></image>
            </view>
        </scroll-view>

        <!-- tab -->
        <view class="tab">
          <text class="active">附近商家</text>
          <text>精选餐饮</text>
        </view>

        <view class="select">
          <picker class="picker">
            <view>
              <text>全部美食</text>
              <image src="/static/images/icon_arr.png" mode="widthFix"></image>
            </view>
          </picker>
          <picker class="picker">
            <view>
              <text>附近</text>
              <image src="/static/images/icon_arr.png" mode="widthFix"></image>
            </view>
          </picker>
          <picker class="picker">
            <view>
              <text>智能排序</text>
              <image src="/static/images/icon_arr.png" mode="widthFix"></image>
            </view>
          </picker>
          <picker class="picker">
            <view>
              <text>筛选</text>
              <image src="/static/images/icon_arr.png" mode="widthFix"></image>
            </view>
          </picker>
        </view>

        <view v-if="catModel" class="list-cat-model dir-left-wrap cross-center">
              <view v-for="(v,k) in cat_list" :key="k">
                  <view @click="cat(v.id)">
                      <view class="cat-name">{{v.name}}</view>
                  </view>
              </view>
        </view>
        <view class="gap"></view>
        <view class="no-content" v-if="!list || list.length === 0">暂无店铺记录</view>
        <app-good-shop-recommendation v-else :theme="getTheme" :coupon_req="true" :mch_list="list" :show-goods="true"></app-good-shop-recommendation>
      </view>
    </app-layout>
</template>

<script>
	import appGoodShopRecommendation
	        from '../../../components/page-component/app-good-shop-recommendation/app-good-shop-recommendation.vue';
	    import {mapGetters, mapState} from "vuex";

	    export default {
	        name: "list",
	        components: {appGoodShopRecommendation},
	        data() {
	            return {
	                catModel: false,
	                toSearch: false,
	                list: [],
					type: '',
	                cat_list: [],
	                page: 1,
	                keyword: '',
	                mch_common_cat_id: 0,
	                load: false,
	                args: false,
	                latitude: 0,
	                longitude: 0,
	                page_loading: false,
	                getFocus: false,
                    cur_city: '定位中'
	            }
	        },
	        onLoad(options) { //this.$commonLoad.onload(options);
	            this.getLocation();
	            this.getCats();
	        },

	        onReachBottom: function () {
	            const self = this;
	            if (self.args || self.load)
	                return;
	            self.load = true;
	            let page = self.page + 1;

	            self.$request({
	                url: self.$api.mch.index,
	                data: {
	                    keyword: self.keyword,
	                    latitude: self.latitude,
	                    longitude: self.longitude,
	                    mch_common_cat_id: self.mch_common_cat_id,
	                    page: page,
	                }
	            }).then(info => {
	                if (info.code === 0) {
	                    [self.page, self.args, self.list] = [page, info.data.list.length === 0, self.list.concat(self.dataMap(info.data.list))];
	                }
	                self.load = false;
	            });
	        },
	        // #ifdef MP
	        onShareAppMessage() {
	            return this.$shareAppMessage({
	                title: `好店推荐`,
	                path: '/plugins/mch/list/list',
	                params: {}
	            });
	        },
	        // #endif
	        methods: {
	            dataMap(list) {
	                if (!list)
	                    return;
	                list.forEach(item => {
	                    item.pic_url = item.store.cover_url;
	                    item.name = item.store.name;
	                    item.goods_num = item.goods_count;
	                    item.order_num = item.order_goods_count;
	                    item.goodsList = item.goods;
	                    item.goodsList.forEach(item1 => {
	                        item1.picUrl = item1.goodsWarehouse.cover_pic;
	                    })
	                });
	                return list;
	            },
	            getLocation() {
					console.log('getLocation==');
	                const self = this;
	                // #ifdef MP
					console.log('getLocation=AA=');
					self.cur_city = '定位中';
	                uni.getLocation({
	                    type: 'wgs84',
	                    success(res) {
	                        [self.latitude, self.longitude] = [res.latitude, res.longitude];
                          if(!res.address){
                            self.cur_city = '中国';
                          }else{
                            self.cur_city = res.address.city;
                          }
	                    },
	                    fail: function (err) {
	                        console.log("failres=" + JSON.stringify(err));
	                    },
	                    complete(res) {
                          console.log('getLocation=222=');
                          console.warn(res);
                          self.loadData();
	                    }
	                })
	                // #endif
	                // #ifdef H5
	                this.$jwx.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
	                    success(res) {
							console.log('getLocation=111=');
	                        [self.latitude, self.longitude] = [res.latitude, res.longitude];
                            if(!res.address){
                              self.cur_city = '中国';
                            }else{
                              self.cur_city = res.address.city;
                            }
	                        self.loadData();
	                    },
	                    fail() {
							console.log('getLocation=23332=');
	                        self.loadData();
	                    }
	                });
	                self.loadData();
	                // #endif
	            },
	            loadData() {
	                const self = this;
	                self.$showLoading();
	                self.$request({
	                    url: self.$api.mch.index,
	                    data: {
	                        keyword: self.keyword,
	                        latitude: self.latitude,
	                        longitude: self.longitude,
	                        mch_common_cat_id: self.mch_common_cat_id,
	                    }
	                }).then(info => {
	                    self.$hideLoading();
	                    if (info.code === 0) {
	                        self.list = self.dataMap(info.data.list);
	                    }
	                }).catch(info => {
	                    self.$hideLoading();
	                })
	            },
	            //分类处理
	            getCats() {
	                const self = this;
	                self.$request({
	                    url: self.$api.mch.category,
	                }).then(info => {
	                    self.cat_list = info.data.list;
	                });
	            },
	            navShop(mch_id) {
	                uni.navigateTo({url: `/plugins/mch/shop/shop?mch_id=` + mch_id});
	            },
	            navGoods(mch_id, goods_id) {
	                uni.navigateTo({url: `/plugins/mch/goods/goods?id=` + goods_id + `&mch_id=` + mch_id});
	            },

	            beSearch: function (e) {
	                if (this.keyword.length === 0) {
	                    this.toSearch = !this.toSearch;
	                    this.getFocus = this.toSearch;
	                }
	            },
	            //搜索
	            bindConfirm() {
	                [
	                    this.page,
	                    this.mch_common_cat_id,
	                    this.catModel,
	                    this.list
	                ] = [
	                    1,
	                    0,
	                    false,
	                    []
	                ]
	                this.loadData();
	            },

	            cat(id) {
	                uni.navigateTo({url: `/plugins/mch/shop/shop?mch_id=` + id});
	            },

	            changeCat() {
	                this.catModel = !this.catModel;
	            },

	            bindInput: function (e) {
	                this.keyword = e.detail.value;
	            },

	            cancelPrint() {
	                this.keyword = '';
	                this.toSearch = false;
	                this.bindConfirm();
	            },
              // 扫码
              scanCode() {
                let that = this;
                // #ifndef MP-ALIPAY || H5
                uni.scanCode({
                  success(res) {
                    if(res.scanType == "CODE_128" || (res.result && res.result.length == 12)) {
                      that.code = res.result
                    } else {
                      if(res.path) {
                        uni.redirectTo({
                          url: res.path
                        })
                      }else {
                        uni.showToast({
                          title: '暂不支持此二维码，请使用应用内扫一扫功能',
                          icon: 'none',
                          duration: 1000
                        });
                      }
                    }
                  }
                })
                // #endif
                // #ifdef H5
                if (this.$jwx.isWechat()) {
                  this.$jwx.scanQRCode({
                    success(res) {
                      let path = '';
                      if(res.path) {
                        path = res.path;
                      }
                      if(res.resultStr) {
                        let index = res.resultStr.indexOf('?#')
                        if(index > -1) {
                          path = res.resultStr.substring(index + 2);
                        }else {
                          uni.showToast({
                            title: res.resultStr,
                            icon: 'none',
                            duration: 1000
                          });
                        }
                      }
                      if(!path) {
                        uni.showToast({
                          title: '无法处理的二维码',
                          icon: 'none',
                          duration: 1000
                        });
                        return false;
                      }
                      uni.navigateTo({
                        url: path
                      })
                    }
                  })
                }else {
                  uni.showToast({
                    title: '暂不支持浏览器点击扫码，请应用扫一扫功能',
                    icon: 'none',
                    duration: 1000
                  });
                }
                // #endif
              },
              // 客服
              kefu() {
                let	url='http://kefu.itm19.com/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=1&groupid=0&special=1'
                // #ifdef APP-PLUS
                plus.runtime.openURL(url);
                return false;
                // #endif
                // #ifdef H5
                window.open(url);
                return false;
                // #endif
                window.location.href = url;
                // url = encodeURIComponent(url)
                // uni.navigateTo({
                // 	url:'/pages/kefu/index?url='+url
                // })
              },
	        },
	        computed: {
	            ...mapGetters('mallConfig', {
	                getTheme: 'getTheme',
	            }),
	        },
	    }
</script>

<style lang="scss" scoped>

	page{
		background: #EFEFF4;
	}

	#apps{

		display: flex;
		flex-direction: column;
		overflow-x: hidden;


		.header{
			position: fixed;
			background: #fff;
			height: 88rpx;
			line-height: 88rpx;
			z-index: 100;
			left: 0;
			right: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 25rpx;
			box-sizing: border-box;

			.lct{
              display: flex;
              align-items: center;

              image {
                width: 35rpx;
                height: auto;
              }

              text {
                font-size: 20rpx;
                color: #333;
                margin-left: 10rpx;
              }
			}

			.so{
				flex: 1;
				margin: 0 20rpx;
				box-sizing: border-box;
				position: relative;
				image{
					width: 36rpx;
					height: auto;
					position: absolute;
					top: 0;
					left: 26rpx;
					bottom: 0;
					margin: auto;
				}
				input{
					background: rgba(219, 219, 219, 0.37);
					border-radius: 100px;
					height: 62rpx;
					padding: 0 32rpx 0 70rpx;
				}
				.placeholder{
					font-size: 24rpx;
					color: #999;
				}
			}

			.sao{
				display: flex;
				align-items: center;
              image {
                width: 33rpx;
                height: auto;
              }

              .kefu {
                width: 38rpx;
                margin-left: 20rpx;
              }
			}

		}


		.swiper{
			display: block;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 88rpx;
			image{
				width: 100%;
				height: auto;
			}
		}


		.icon_list{
			display: grid;
			grid-template-columns: repeat(5,1fr);
			gap: 20rpx;
			.item{
				image{
					width: 124rpx;
					height: auto;
					display: block;
					text-align: center;
					margin: auto;
				}
				text{
					font-size: 24rpx;
					color: #333;
					display: block;
					text-align: center;
				}
			}
		}




		// 品牌推荐
		.logo_hot{
			margin: 20rpx 0;
			display: block;
			padding: 24rpx 24rpx 0 24rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.t{
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
				}
				.more{
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
					}
				}
			}
		}



		// scroll-view
		.scrollview{
			margin: 10rpx 0 0 24rpx;
			white-space: nowrap;
			overflow-x: auto;
			::-webkit-scrollbar{width:0px; height:0px;}
			.item{
				background: #fff;
				width: 144rpx;
				height: 144rpx;
				display: inline-block;
				border-radius: 10rpx;
				margin-right: 20rpx;
				&:last-of-type{
					margin-right: 48rpx;
				}
			}
			image{
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
			}
		}



		// tab
		.tab{
			display: flex;
			align-items: center;
			padding: 24rpx;
			box-sizing: border-box;
			text{
				font-size: 28rpx;
				color: #666;
				font-weight: bold;
				margin-right: 40rpx;
				z-index: 20;
				&.active{
					color: #333;
					font-size: 34rpx;
					position: relative;
					&::after{
						content: '';
						background: linear-gradient(90deg, #DE4335 0%, #F88365 100%);
						width: 100%;
						height: 12rpx;
						display: inline-block;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0rpx;
						margin: auto;
						z-index: -1;
					}
				}
			}
		}




		// select
		.select{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 24rpx;

			.picker{
				display: flex;
				align-items: center;
				image{
					width: 20rpx;
					height: auto;
					display: inline-block;
					margin-left: 10rpx;
				}
				view{
					font-size: 22rpx;
					color: #999;
				}
			}

		}




		// pro_list
		.pro_list{
			padding: 24rpx;
			box-sizing: border-box;

			.item{
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx 20rpx 40rpx 20rpx;
				box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.img{
					width: 146rpx;
					height: auto;
					image{
						width: 146rpx;
						height: 146rpx;
						border-radius: 18rpx;
					}
				}

				.text{
					margin-left: 20rpx;
					flex: 1;
					.t{
						font-weight: bold;
						font-size: 28rpx;
					}
				}

				.star_box{
					margin: 8rpx 0;
					display: flex;
					align-items: center;
					.star{
						display: flex;
						align-items: center;
						image{
							width: 26rpx;
							height: auto;
						}
					}
					.fs{
						font-size: 22rpx;
						color: $index_color;
						font-weight: bold;
						margin: 0 10rpx;
						box-sizing: border-box;
					}
					.price{
						font-size: 22rpx;
						color: #666;
					}
				}

				.label{
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #666;
					margin: 10rpx 0 16rpx 0;
					text{
						margin-right: 10rpx;
					}
				}


				.footer{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label_s{
						display: flex;
						align-items: center;
						flex: 1;
						text{
							border: 1px #DE4335 solid;
							border-radius: 6rpx;
							padding: 3rpx 10rpx 4rpx 10rpx;
							box-sizing: border-box;
							font-size: 20rpx;
							color: $index_color;
							margin-right: 10rpx;
						}
					}
					.mm{
						display: flex;
						align-items: center;
						image{
							width: 20rpx;
							height: auto;
						}
						text{
							font-size: 22rpx;
							color: #999;
							margin-left: 10rpx;
						}
					}
				}

			}
		}



	}


</style>
